<template>
	<view class="container">
		<view class="logo">
			<view class="is-flex is-column is-justify-center  is-align-center">
				<image src="../../static/img/login/logo.png" mode="aspectFit" class="logoimg"></image>
			</view>
		</view>

		<form :report-submit="true" @submit="formLogin">
			<view class="input_content">

				<view class="input_item">
					<tui-icon name="mobile" :size="20" color='#999999'></tui-icon>
					<input class="is_input" type="number" name="mobile" placeholder="请输入手机号码" placeholder-class="phcolor" maxlength="11" v-model="mobile"/>
				</view>

				<view class="input_item">
					<tui-icon name="pwd" :size="20" color='#999999'></tui-icon>
					<input class="is_input" type="passworld" name="passworld" placeholder="请输入密码" placeholder-class="phcolor" maxlength="20" v-model="passworld"/>
				</view>

				<view class="toReg">
					<view class="toRegRight">
						<!-- <text class="toRegtxt">还没有注册？</text>
						<text class="toRegGo" @click="toRegist">去注册</text> -->
					</view>
					<view class="toRegleft" @click="forgetPassWord">
						<text class="noPass">忘记密码</text>
					</view>
				</view>

				<view class="loginbtn">
					<button :disabled="butSubmit" :loading="butLoading" hover-class="btn-hover" form-type="submit">登 录</button>
				</view>

				<view class="other">
					<view class="othertxt">其他登录</view>
					<view class="otherLogin">
						<view>
							<!-- <navigator url="complete">
								<image class="wximg" src="../../static/img/login/WeChat.png"></image>
								<view>微信登录</view>
							</navigator> -->
							<view @click="handleThirdLoginApp">
								<image class="wximg" src="../../static/img/login/WeChat.png"></image>
								<view>微信登录</view>
							</view>
						</view>
						<view>
							<navigator url="codeLogin">
								<image class="dximg" src="../../static/img/login/cellphone.png"></image>
								<view>短信验证</view>
							</navigator>
						</view>
					</view>
				</view>

			</view>
		</form>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import util from "@/utils/util.js"

	export default {
		data() {
			return {
				disabled: false,
				mobile: "",
				passworld: "",
				type: "primary",
				butSubmit: false,
				butLoading: false
			}
		},
		onLoad(e) {
			this.getUserInfo();
			if(e.loginout == 1){
				// uni.reLaunch({
				// 	url: 'pages/index/index'
				// })
			}
		},
		methods: {
			...mapMutations(['login']),
			// 获取用户信息
			getUserInfo(){
				let _this = this;
				_this.tui.request('/app/user/getUserInfo', 'GET', {}, false, false, false, )
					.then(res => {
						
							
					}).catch(err => {
						console.log(err)
					})
			},
			
			formLogin(e) {
				let _this = this;
				let mobile = e.detail.value.mobile;
				let passworld = e.detail.value.passworld;
				console.log(mobile);
				console.log(passworld);
				if (util.isNullOrEmpty(mobile)) {
					_this.tui.toast('请输入手机号码');
					return
				} else if (!util.isMobile(mobile)) {
					_this.tui.toast('手机号输入有误，请重新输入');
					return
				} else if (util.checkPwd(passworld)) {
					_this.tui.toast('请输入密码');
					return
				} else if (passworld != _this.passworld) {
					_this.tui.toast('密码输入有误，请重新输入');
					return
				}
				_this.butSubmit = true;
				_this.butLoading = true;

				_this.$http.post(_this.tui.interfaceUrl() + '/app/user/login', {
					mobile: mobile,
					password: passworld
				}).then(res => {
					if (res.data.errno == 0) {
						let user = res.data.data.userInfo;
						uni.setStorageSync("token", user.qianyanToken);
						_this.login(user);
						setTimeout(() => {
							uni.reLaunch({
								url: '../user/user'
							})
						}, 200);
					} else {
						_this.$api.msg(res.data.errmsg);
						_this.butSubmit = false;
						_this.butLoading = false;
					}

				}).catch(err => {
					console.log(err)
					_this.butSubmit = false;
					_this.butLoading = false;
				})
			},

			// 忘记密码
			forgetPassWord() {
				// this.$api.msg('忘记密码');
				uni.navigateTo({
					url: 'forgetPassWord'
				})
			},

			// 去注册
			toRegist() {
				// this.$api.msg('去注册');
				uni.navigateTo({
					url: 'register'
				})
			},


			//app第三方登录
			handleThirdLoginApp() {
				let that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									console.log("App微信获取用户信息成功", loginRes);
									// 获取用户信息
									uni.getUserInfo({
									  provider: 'weixin',
									  success: function (infoRes) {
										console.log(infoRes);
										uni.setStorageSync("infoRes", infoRes);
										
										// 请求登录接口方法
										that.getApploginData(loginRes)
										
									  }
									});
									
								},
								fail: function(res) {
									console.log("App微信获取用户信息失败", res);
								}
							})
						}
					}
				});
			},
			
			// 请求登录接口方法
			getApploginData(data) {
				let that = this
				let openId = data.authResult.openid
				console.log(openId)
				
				that.$http.post(that.tui.interfaceUrl() + '/app/user/weChatLogin', {
				    "weixinOpenid": openId
				    
				}).then(res => {
					console.log(res.data)
					if(res.data.data.isBind){
						console.log(res.data.data)
					
					}else{
						uni.navigateTo({
							url: `/pages/public/completewx?openId=${openId}`
						})
					}
					
				}).catch(err => {
					console.log(err)
				})	
				
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.reg {
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #f1f1f1;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	/* logo */
	.logo {
		text-align: center;
		margin: 50rpx auto 50rpx auto;
	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	/* 表单 */
	/* input框 */
	.input_content {
		width: 85%;
		margin: 0 auto;
	}

	.input_item {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		color: #999999;
		font-size: 14px;
		box-sizing: border-box;
		appearance: none;
		box-shadow: none;
		border-radius: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		border: 2rpx solid #e5e5e5;
		outline: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 50upx;
	}

	.input_img {
		width: 20px;
		height: 20px;
	}

	.is_input {
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		width: 100%;
		padding-left: 5px;
	}

	.input_item:nth-child(2) {
		margin-bottom: 20upx;
	}

	/* 获取验证码 */
	.codeimg {
		position: absolute;
		font-size: 12px;
		right: 9%;
		z-index: 999;
		width: 150rpx;
		text-align: center;
		color: #6E609E;
		/* margin-top: -11%; */
		background: #fff;
		border-top-right-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-left: 1px solid #e5e5e5;
	}

	/* 按钮 */
	.loginbtn {
		width: 100%;
		margin: 10px auto;
	}

	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #D14798;
		opacity: 0.8;
	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}


	/* 其他登录 */
	.other {
		text-align: center;
		margin-top: 230rpx;
	}

	.othertxt {
		font-size: 14px;
		color: #666666;
		margin-bottom: 60rpx;
	}

	.otherLogin {
		font-size: 14px;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.wximg {
		width: 50px;
		height: 47px;
	}

	.dximg {
		width: 50px;
		height: 47px;
	}



	/* 去注册 */
	.toReg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		height: 24px;
	}

	.toRegRight {
		display: flex;
		align-items: center;
	}

	.toRegtxt {
		padding-left: 13px;
		color: #cccccc;
	}

	.toRegGo {
		color: #ff2431;
	}

	.noPass {
		padding-right: 30rpx;
		color: #0012ff;
	}
</style>
